<template>
  <el-dialog title="新增/编辑用户" :visible.sync="editDialogVisible" width="50%">
    <el-form class="add-form" :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="100px">
      <el-form-item label="用户名" prop="role">
        <el-input v-model="editForm.role" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input placeholder="请输入密码" v-model="editForm.password" show-password></el-input>
      </el-form-item>
      <el-form-item label="角色" class="form-item-select" prop="username">
        <el-select v-model="editForm.username" placeholder="请选择角色权限">
          <el-option v-for="item in $store.state.roleRightList" :key="item.id" :label="item.title" :value="item.title"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="权限组 id" prop="permission_group_id">
        <el-input v-model="editForm.permission_group_id" placeholder="请输入权限组 id"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="editForm.email" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="introduction">
        <el-input v-model="editForm.introduction" placeholder="请输入角色描述"></el-input>
      </el-form-item>
      <el-form-item label="性别" class="form-item-select" prop="sex">
        <el-select v-model="editForm.sex" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="editDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editUser">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { editUser } from '@/assets/api/user/user.js'

export default {
  name: 'UserEdit',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    user: {
      type: Object,
      required: true
    }
  },
  created () { },
  data () {
    return {
      editDialogVisible: false,
      // editForm: {
      //   username: '', // 角色
      //   password: '', // 密码
      //   permission_group_id: '', // 权限组id
      //   introduction: '', // 角色描述
      //   sex: '', // 性别
      //   roleRightsList: [], // 角色权限列表
      //   email: '', // 邮箱
      //   role: '' // 用户
      // },
      editForm: this.user,
      editFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
        ],
        permission_group_id: [
          { required: true, message: '请输入权限组 id', trigger: 'blur' }
        ],
        introduction: [
          { required: true, message: '请输入角色描述', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        role: [
          { required: true, message: '请选择角色', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 编辑用户
    async editUser () {
      try {
        await editUser(this.user.id, {
          username: this.editForm.username, // 用户名
          email: this.editForm.email, // 邮箱
          password: this.editForm.password, // 密码
          role: this.editForm.role, // 角色
          permission_group_id: parseInt(this.editForm.permission_group_id), // 权限组 id
          introduction: this.editForm.introduction, // 描述
          sex: this.editForm.sex // 性别
        })
        this.$message.success('编辑用户成功')
        this.$emit('success')
        this.editDialogVisible = false
      } catch (err) {
        this.$message.error('编辑用户失败')
      }
    },
    // 重置表单
    resetForm () {
      this.$refs.editFormRef.resetFields()
    }
  },
  watch: {
    visible (val) {
      this.editDialogVisible = val
      this.$store.dispatch('loaderRightList')
      this.editForm = this.user
    },
    editDialogVisible (val) {
      this.$emit('update:visible', val)
      // 关闭对话框清空表单
      this.$nextTick(() => {
        this.resetForm()
      })
    }
  }
}
</script>

<style  lang='less' scoped>
.add-form {
  padding-top: 20px;
  padding: 20px 85px 0 40px;
  border-top: 1px solid #ebebeb;
  border-bottom: 1px solid #ebebeb;

  .form-item-select {
    .el-select {
      width: 100%;
    }
  }
}
</style>
